// 组件通信
import React, { Component } from 'react'
// 1.父传子，直接通过prop子组件标签身上绑定父组件中的数据即可
// 2.子传父，在子组件标签身上绑定父组件中的函数，子组件调用父组件中的函数，把数据作为参数传递给父组件

class Son extends Component {
    render() {
        // 使用 this.props.msg 获取父组件传递的数据
        return (
            <>
                <div>我是子组件 {this.props.msg}</div>
                <button onClick={() => this.props.onGetSonMsg("我是子组件传递的数据")}>子组件调用父组件函数</button>
            </>

        )
    }
}

class Parent extends Component {
    state = {
        msg: "this is parent msg",
        sonMsg: ""
    }

    getSonMsg = (sonMsg) => {
        console.log(sonMsg)
        this.setState({
            ...this.state,
            sonMsg
        })
    }
    render() {
        return (
            <div>我是父组件 <Son msg={this.state.msg} onGetSonMsg={this.getSonMsg} /> {this.state.sonMsg}</div>
        )
    }
}

const App = () => {
    return (
        <div>
            <Parent />
        </div>
    )
}

export default App
